<template>
  <div class="w-full h-full bg-gray-50 p-6">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
      <div class="bg-white rounded-lg shadow-sm px-6 py-4 w-full">
        <h1 class="text-xl font-bold text-gray-800 flex items-center">
          <span class="border-l-4 border-blue-500 pl-3">订单详情</span>
          <span class="ml-4 text-sm text-gray-500 font-normal">订单号：{{ paramValue }}</span>
        </h1>
      </div>
    </div>
    <!-- 保留动态表单注释，供后期使用 -->
    <div class="bg-white rounded-lg shadow-sm mb-6">
      <!-- <div class="p-5">
        <DynamicForm :fields="formFields" />
      </div> -->
    </div>
    <!-- 主要内容卡片 -->
    <div class="bg-white rounded-lg shadow-sm">
      <div class="max-w-full overflow-x-auto">
        <el-table :data="tableData" class="w-full" :header-cell-class-name="'bg-gray-50 text-gray-700 font-medium'"
          border>
          <el-table-column prop="imageUrl" label="饰品图片" width="150" align="center">
            <template v-slot="{ row }">
              <div class="p-2">
                <img :src="row.imageUrl || '/assets/imgs/touxiang.jpg'" alt="饰品图片"
                  class="w-24 h-24 object-cover rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200" />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="饰品名称" min-width="200" align="center">
            <template v-slot="{ row }">
              <div class="space-y-2">
                <span class="text-gray-800 font-medium">{{ row.jewelryName }}</span>
                <p class="text-sm text-gray-500">磨损度: {{ row.abrade }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="quantity" label="数量" width="120" align="center">
            <template v-slot="{ row }">
              <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full">
                {{ row.orderCount || 1 }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="mortgageAmount" label="抵押金额" width="150" align="center">
            <template v-slot="{ row }">
              <span class="text-orange-600 font-medium">¥ {{ formatPrice(row.mortgagePrice) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="daysMortgaged" label="抵押天数" width="120" align="center">
            <template v-slot="{ row }">
              <span class="px-3 py-1 bg-green-50 text-green-600 rounded-full">
                {{ row.mortgageDays }} 天
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="storageFee" label="保管费" width="120" align="center">
            <template v-slot="{ row }">
              <span class="text-gray-600">¥ {{ formatPrice(0) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { JewelryOrder } from '~/types/JewelryOrder';

definePageMeta({
  title: '订单详情',
  showInMenu: false, // 控制该页面是否在菜单中显示
  requiresAuth: true, // 控制该页面是否需要登录
  layout: 'back',
});
const { showLoading, hideLoading } = useLoading()
const loading = ref(true)
const tableData = ref<JewelryOrder[]>([])
const route = useRoute();
const paramValue = route.query.orderNumber;
// 格式化价格的工具函数
const formatPrice = (price: number) => {
  return price.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 获取数据
try {
  showLoading()
  const { data } = await useCustomFetch<{
    data: JewelryOrder[]
  }>(`/api/order/orderInfo?orderNumber=${paramValue}`, {
    method: 'POST',
    withToken: true,
    body: {
      orderNumber: paramValue
    }
  })
  tableData.value = data.value?.data || []
} catch (error) {
  console.error('获取订单数据失败:', error)
  ElMessage.error('获取订单数据失败')
} finally {
  hideLoading()
}
</script>

<style>
.el-table {
  --el-table-border-color: theme('colors.gray.200');
  --el-table-header-bg-color: theme('colors.gray.50');
}

/* 自定义表格样式 */
:deep(.el-table th) {
  font-weight: 600;
  background-color: #f8fafc !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f1f5f9;
}

:deep(.el-table td, .el-table th) {
  padding: 12px 0;
}

:deep(.el-table .cell) {
  padding: 0 12px;
}
</style>